<template>
	<div class="poster" v-show="poster.posterId" :style="{backgroundImage: 'url('+poster.backgroundImg+')'}">
		<div class="poster_logo" v-show="poster.logoImg" id="poster_logo" :style="{left:poster.logoLeft+'rem', top:poster.logoTop+'rem', backgroundImage: 'url('+poster.logoImg+')'}"></div>
		<div class="poster_theme">{{poster.posterTheme}}</div>
		<div class="poster_explain">{{poster.explanation}}</div>
		<div class="poster_qrCode" :id="qrCodeId" :style="{left:poster.qrCodeLeft+'rem', top:poster.qrCodeTop+'rem'}">
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
	props : ["previewId"],
	data: function() {
		return {
			show: false,
			open: false,
			poster: {}, //海报对象
			param : {
				posterId : ""
			},
			qrCodeId : tool.uuid(), //二维码元素id随机生成
			qrCodeObj : null, //二维码对象
		}
	},
	mounted : function() {
		this.qrCodeObj = new QRCode(this.qrCodeId, {
			width: 1.6*rem,
			height: 1.6*rem,
			text: "此处为海报预览区。如需分享海报，请点推广按钮扫码获取"
		});
	},
	created: function() {
		var vm = this;
		//获取海报id,由组件参数或者查询参数传来
		vm.param.posterId = vm.previewId || vm.$route.query.posterId;
		
		//获取海报详情
		api.posterInfo(vm.param).then(function(data) {
			vm.poster = data.info;
			//不是预览,即是独立页面
			if(!vm.previewId) {
				//拼接活动链接
				let qrCode = vm.poster.qrCode;
				qrCode += (qrCode.indexOf("?")>=0? "&" : "?");
	  			qrCode += "userId=" + vm.$route.query.userId;
	  			qrCode += "&posterId=" + vm.poster.posterId;
	  			//加载二维码
				vm.qrCodeObj.clear();
				vm.qrCodeObj.makeCode(qrCode);
			}
			//设置标题
			document.title = vm.poster.posterName;
		});
	}
}
</script>

<style scoped>
	.poster {
		float: left;
		position: relative;
		width: 3.75rem;
		height: 6.67rem;
		min-height: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		/*background-color: #dceff4;*/
	}
	
	.poster_logo {
		position: absolute;
		width: 0.58rem;
		height: 0.58rem;
		border-radius: 0.14rem;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		/*background-color: #bcd6dc;*/
		cursor: move;
	}
	
	.poster_theme {
		margin-top: 1.16rem;
		padding: 0 0.2rem;
		width: 100%;
		min-height: 0.42rem;
		line-height: 0.42rem;
		color: #616161;
		text-align: center;
		font-size: 0.36rem;
		font-weight: bold;
		white-space: pre-wrap;
		user-select: none;
	}
	
	.poster_explain {
		text-align: center;
		font-size: 0.14rem;
		width: 100%;
		line-height: 0.2rem;
		padding: 0.1rem 0.2rem 0 0.2rem;
		color: #616161;
		white-space: pre-wrap;
		user-select: none;
	}
	
	.poster_qrCode {
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 0.1rem;
		background-color: #ffffff;
		padding: 0.2rem;
	}
	
</style>